<template>
	<view class="container">
		<view class="header">
			<view class="header-title-left">欢迎来到盐池零工平台自助系统</view>
			<view class="header-title">人才大厅</view>
		</view>
		<view class="stats">
			<view class="stat-item" v-for="(item, index) in stats" :key="index">
				<view class="stat-value-container">
					<view class="stat-title">{{ item.title }}</view>
					<view class="stat-value">{{ item.value }}<text class="unit">人</text></view>
				</view>
			</view>
		</view>
		<view class="buttons">
			<!-- <view class="button-item worker" @click="toggle('company')">
				<view class="middle-container">
					<view class="button-text">招工</view>
					<image style="width: 200px; height: 200px;" src="../../static/images/worker.png"></image>
				</view>
			</view>
			<view class="button-item company" @click="toggle('worker')">
				<view class="middle-container">
					<view class="button-text">找工</view>
					<image style="width: 200px; height: 200px;" src="../../static/images/company.png"></image>
				</view>
			</view> -->
			<view class="button-item company" @click="toggle('consult')">
				<view class="middle-container">
					<view class="button-text">咨询入口</view>
					<image style="width: 200px; height: 200px;" src="../../static/images/company.png"></image>
				</view>
			</view>
			<view class="button-item company" @click="toggle('fast')">
				<view class="middle-container">
					<view class="button-fast">招工快速通道</view>
					<image style="width: 200px; height: 200px;" src="../../static/images/fast.png"></image>
				</view>
			</view>
		</view>


		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change" borderRadius="10px 10px 10px 10px" class="popup">
				<view class="popup-content">
					<view class="popup-title">
						<image class="popup-title-icon" src="../../static/images/comma.png"></image>
						{{ tips }}
					</view>
					<view class="popup-sub-title">目前只支持二代身份证</view>
					<view class="popup-image" @click="startReadCard">
						<view class="popup-image-left">
							<view class="title">二代身份证</view>
							<view class="sub-title">放置在读卡区域</view>
							<view class="sub-gang"></view>
							<Ripple />
						</view>
						<view class="popup-image-right">
							<image style="width: 367px; height: 321px;" src="../../static/images/card.png"></image>
						</view>
					</view>

					<image class="popup-footer-icon" src="../../static/images/icon-left.png"></image>
				</view>
			</uni-popup>

		</view>
	</view>

</template>
<script>
	import {
		getMainData
	} from '@/api/home/index.js';
	import zzld from '../../utils/zzld.js';
	import {
		parseObjectLiteral
	} from '../../utils/custom.js';
	import {
		login
	} from '@/api/home/index.js';
	// import {
	// 	ripple
	// } from '../common/ripple.vue';
	export default {

		components: {
			Ripple: () => import('../common/ripple.vue'),
		},
		data() {
			return {

				stats: [{
						key: '1',
						title: '发布岗位', // publishJobCount
						value: ''
					},
					{
						key: '2',
						title: '登记求职', // registerJobCount
						value: ''
					},
					{
						key: '3',
						title: '累计就业', // cumulativeEmploymentCount
						value: ''
					},
					{
						key: '4',
						title: '岗位缺口', // jobGapCount
						value: ''
					}
				],
				show: 'false',
				type: '',
				tips: '请使用身份证登录',
				audioSrc: 'static/audio/company_1.mp3',
				audioDome: null,
			};
		},
		onLoad() {
			this.getMainDataList();
		},
		onShow() {
			this.show = false;
			this.$refs.popup.close();
			uni.removeStorageSync('user');
			uni.removeStorageSync('token');
			uni.removeStorageSync('tokenId');
		},
		onHide() {
			console.log('页面隐藏');
			// 确保在页面卸载时清理资源
			this.cleanupReadCard();
		},
		onUnload() {
			console.log('页面卸载');
			// 确保在页面卸载时清理资源
			this.cleanupReadCard();
		},
		methods: {
			initReadCard() {
				zzld.init(); // 假设这是你需要的初始化操作
				this.bindCallbacks();
			},
			bindCallbacks() {
				// 绑定A页面特有的回调
				zzld.readIdCardCallback = (res) => {
					this.handleIdCardData(res);
				};
			},
			startReadCard() {
				zzld.showToast("==开始读卡==");
				zzld.startReadIdCard();
			},
			cleanupReadCard() {
				// 清理全局对象上的方法
				if (window.android) {
					// 移除 Android 相关的回调函数
					delete window.android.readIdCardCallback;
					delete window.android.uploadCallback;
					delete window.android.downloadCallback;
					delete window.android.locationCallback;
				}
				// 清理 zzld 对象
				if (window.zzld) {
					window.zzld = null;
				}
				// 移除 startReadIdCard 方法
				delete window.startReadIdCard;
			},


			audio() {
				let audios = uni.createInnerAudioContext();
				audios.src = require('../../static/audio/请招工人1.mp3');
				audios.play();
			},

			audioDing() {
				let audios = uni.createInnerAudioContext();
				audios.src = require('../../static/audio/ding_5.mp3');
				audios.play();
			},

			// 获取首页统计数据
			getMainDataList() {
				getMainData().then((res) => {
					console.log('res', res);
					const {
						cumulativeEmploymentCount,
						jobGapCount,
						publishJobCount,
						registerJobCount
					} = res.data;
					const data = {
						cumulativeEmploymentCount,
						jobGapCount,
						publishJobCount,
						registerJobCount
					};
					this.updateStatsValues(data);
				})
			},

			updateStatsValues(fetchedData) {
				this.stats.forEach(stat => {
					switch (stat.key) {
						case '1':
							stat.value = fetchedData.publishJobCount;
							break;
						case '2':
							stat.value = fetchedData.registerJobCount;
							break;
						case '3':
							stat.value = fetchedData.cumulativeEmploymentCount;
							break;
						case '4':
							stat.value = fetchedData.jobGapCount;
							break;
						default:
							console.warn(`Unknown stat title: ${stat.title}`);
					}
				});
			},
			toggle(value) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				if (value === 'worker') {
					uni.$u.route({
						url: 'pages/worker/industry'
					});
					uni.setStorageSync('type', value);
					return;
				}
				if (value === 'consult') {
					uni.$u.route({
						url: 'pages/consult/industry'
					});
					uni.setStorageSync('type', value);
					return;
				}
				if (value === 'fast') {
					this.tips = "请招工人员扫证";
				} else {
					this.tips = "请使用身份证登录";
				}
				this.type = value;
				this.initReadCard();
				this.startReadCard();
				this.$refs.popup.open('center');

				// 播放音频
				this.audio();
			},
			change(e) {
				console.log('e', e);
				this.show = e.show;
				if (!e.show) {
					this.type = null;
				}
			},

			// 读卡
			startReadCard() {
				zzld.showToast("==开始读卡==");
				zzld.startReadIdCard((res) => {
					zzld.showToast(".....读取数据...");
					this.audioDing();
					console.log('数据', res);
					console.log('res', typeof res);
					const head = this.headParse(res);
					const data = this.infoParse(res);
					console.log('data', data);
					console.log('data', head);
					const newData = {
						address: data._Addr,
						idCard: data._IDCard,
						idCardExpirationDate: data._StartDate + ' - ' + data._EndDate,
						issuingAuthority: data._Department,
						nation: data._People,
						photo: head,
						userName: data._PeopleName,
						sex: data._Sex,
					}
					console.log('newData', newData);
					uni.setStorageSync('user', newData);
					login(newData).then((res) => {
						console.log('res', res);
						uni.setStorageSync('token', {
							token: res.data.token
						})
						uni.setStorageSync('tokenId', res.data.tokenId)
						window.zzld = null;
						const type = this.type;
						if (type === 'fast') {
							uni.$u.route({
								url: 'pages/fast/index'
							})
						} else {
							uni.$u.route({
								url: 'pages/company/index'
							})
						}
					})
				})
			},

			handleIdCardData(res) {
				zzld.showToast(".....读取数据...");
				this.audioDing();
				console.log('数据', res);
				console.log('res', typeof res);
				const head = this.headParse(res);
				const data = this.infoParse(res);
				console.log('data', data);
				console.log('data', head);
				const newData = {
					address: data._Addr,
					idCard: data._IDCard,
					idCardExpirationDate: data._StartDate + ' - ' + data._EndDate,
					issuingAuthority: data._Department,
					nation: data._People,
					photo: head,
					userName: data._PeopleName,
					sex: data._Sex,
				}
				console.log('newData', newData);
				uni.setStorageSync('user', newData);
				login(newData).then((res) => {
					console.log('res', res);
					uni.setStorageSync('token', {
						token: res.data.token
					})
					uni.setStorageSync('tokenId', res.data.tokenId)
					window.zzld = null;
					const type = this.type;
					if (type === 'fast') {
						uni.$u.route({
							url: 'pages/fast/index'
						})
					} else {
						uni.$u.route({
							url: 'pages/company/index'
						})
					}
				})
			},

			infoParse(str) {
				// 使用正则表达式提取 info 后面的内容
				const match = str.match(/"info"\s*:\s*({[^}]*})/);

				if (match && match[1]) {
					const infoString = match[1];
					console.log(infoString); // 输出: {"name": "123","sex": "男"}

					// 如果需要将提取的字符串转换为对象
					try {
						const infoObject = JSON.parse(infoString);
						console.log(infoObject); // 输出: { name: '123', sex: '男' }
						return infoObject
					} catch (error) {
						console.error("Error parsing JSON:", error.message);
					}
				} else {
					console.log('No match found');
				}
			},

			headParse(jsonString) {
				// 分割字符串并获取 "head" 后面的值，去掉外层的双引号
				let result = "data:image/png;base64," + jsonString.split('"head":"')[1].split('"')[0];
				return result.replace(/[\r\n]/g, '').trim();
			},
		}
	}
</script>

<style lang="less" scoped>
	/* 基础样式 */
	body,
	page {
		font-family: Arial, sans-serif;
		background-color: #f4f6fa;
		margin: 0;
		padding: 0;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-items: center;
		height: 100vh;
		/* background-color: #CBE1FB; */
		/* 背景颜色 */
		background-image: url('../../static/images/background_2.png');
		/* 背景图片 */
		// background-size: cover;
		background-position: center;
		background-blend-mode: multiply;
		/* 背景混合模式，使颜色和图片叠加 */
	}

	.header {
		padding: 50px;
		width: 90%;

		.header-title-left {
			text-align: left;
			font-size: 32px;
			color: #384161;
			width: 100%;
		}

		.header-title {
			text-align: center;
			font-size: 120px;
			font-weight: 600;
			color: #4B81FF;
			width: 100%;
			// margin: 60px auto; // 三个
			margin: 80px auto; // 两个
			/* 使文本居中时占据整行 */
		}
	}


	.stats {
		display: flex;
		justify-content: space-around;
		width: 98%;
		margin: 0 auto 50px; // 三个
	}

	.stat-item {
		width: 20%;
		background-color: #FFFFFF33;
		/* 背景透明 */
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* opacity: 0.2; */
		padding: 20px 10px;
		text-align: center;
		margin: 10px;
		display: flex;
		flex-direction: column;
		/* 上下结构 */
		align-items: center;
		border: 2px solid #fff;
	}

	.stat-value-container {
		font-size: 22px;
		font-weight: bold;
		color: #384161;

		.stat-title {
			margin-bottom: 10px;
		}

		.stat-value {
			font-size: 52px;
			color: #3c79ff;

			.unit {
				font-size: 22px;
				font-weight: bold;
				color: #384161;
			}
		}
	}


	.buttons {
		display: flex;
		flex-direction: column;
		width: 95%;
		/* align-items: center; */
		margin: 0 auto;
	}

	.button-item {
		// width: 100%;
		// background-color: #FFFFFF33;
		// background-image: url('../../static/images/background-content.png');
		// border: 2px solid #fff;
		color: #3c79ff;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		// margin: 10px;
		cursor: pointer;
		border-radius: 20px;
		// box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		display: flex;
		// flex-direction: column;
		align-items: center;
		height: 280px;
		justify-content: center;
		opacity: 0.9;

		position: relative;
		padding: 10px;
		margin-bottom: 50px; // 三个

		// .first-image {
		// 	position: absolute;
		// 	bottom: 0;
		// 	left: 0;
		// 	width: 100%;
		// 	height: 50%;
		// }

		// .last-image {
		// 	position: absolute;
		// 	top: 0;
		// 	right: 0;
		// 	width: 100%;
		// 	height: 50%;
		// }

		.middle-container {
			display: flex;
			// justify-content: space-around;
			justify-content: space-between;
			align-items: center;
			width: 60%;
		}

		.button-text {
			font-size: 64px;
			font-weight: 600;
			color: #4B81FF;
			// margin-right: 100px;
			// text-align: center;
			margin: 0 auto;
		}

		.button-fast {
			font-size: 64px;
			font-weight: 600;
			color: #4B81FF;
			// margin-right: 50px;
		}

		.worker {
			background-image: url('../../static/images/worker.png');
			background-size: cover;
			background-repeat: no-repeat;
		}

		.company {
			background-image: url('../../static/images/company.png');
			background-size: cover;
			background-repeat: no-repeat;
		}
	}

	.worker {
		background-image: url('../../static/images/background-conn.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.company {
		background-image: url('../../static/images/background-coon_2.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.button-item:active {
		background-color: #e0eaf6;
	}

	.button-image {
		width: 50px;
		/* 根据需要调整图片大小 */
		height: 50px;
		/* 根据需要调整图片大小 */
		margin-bottom: 10px;
	}

	.button-text {
		font-size: 16px;
		color: #3c79ff;
	}


	// 弹框
	.uni-popup__wrapper {
		// background-image: url();
		// background-color: aqua;

	}

	.popup-content {
		height: 1000px;
		width: 850px;
		padding: 50px;
		border-radius: 10px;
		text-align: center;
		background-color: #DBEAFB;
		background-image: url('../../static/images/card_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;

		.popup-title {
			text-align: center;
			font-size: 64px; // 36
			font-weight: 600;
			line-height: 60px;
			margin: 100px auto 50px;
			position: relative;

			.popup-title-icon {
				position: absolute;
				top: -100px;
				left: 50px;
				width: 130px;
				height: 130px;
			}
		}

		.popup-sub-title {
			text-align: center;
			font-size: 36px; // 36
			font-weight: 600;
			line-height: 60px;
		}



		.popup-image {
			width: 630px;
			border-radius: 20px;
			margin: 150px auto;
			height: 380px;
			padding: 50px 50px;
			background: linear-gradient(to bottom, #FFFFFFFF, #ECF6FEFF);
			display: flex;
			text-align: center;

			.popup-image-left {
				width: 34%;
				text-align: left;

				.title {
					font-size: 36px;
					font-weight: 600;
					line-height: 60px;
				}

				.sub-title {
					font-size: 24px;
					font-weight: 500;
					line-height: 60px;
					color: #687792;
				}

				.sub-gang {
					width: 68px;
					right: 566px;
					height: 4px;
					margin-top: 60px;
					border-radius: 16px;
					background: #d4dadf;
				}
			}

			.popup-image-right {
				margin: auto;
			}
		}

		.popup-footer-icon {
			width: 200px;
			height: 150px;
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
	}
</style>